<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<title>JQuery.groupTable Demo</title>
	<link href="style/JQuery.groupTable.css" type="text/css" rel="stylesheet" />
</head>

<body>
	<script src="js/jquery-1.4.1.min.js" type="text/javascript"></script>
	<script src="js/Jquery.groupTable.js"></script>
	<script type="text/javascript">
		$(document).ready(function () {
			$("#Table1").groupTable({ groupby: '0, 3' });
			$("#Table2").groupTable({ groupby: '0,3' });
			$("#Table3").groupTable({ groupby: '0,4,3', collapse: 1 });
		});

	</script>
	<!-- <h1>Origin</h1>
	<div id="t1">
		<table cellspacing="0" rules="all" border="1" id="Table0" style="width:100%;border-collapse:collapse;">
			<thead>
				<tr>
					<th scope="col">Departmement</th>
					<th scope="col">User Id</th>
					<th scope="col">Name</th>
					<th scope="col">Gender</th>
					<th scope="col">Title</th>
					<th scope="col">Modified</th>
					<th scope="col">Modified By</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>Software</td>
					<td>test1</td>
					<td>test1</td>
					<td>male</td>
					<td>Engineer</td>
					<td>12/2/2010 10:41:58 AM</td>
					<td>&nbsp;</td>
				</tr>
				<tr>
					<td>Software</td>
					<td>test2</td>
					<td>test2</td>
					<td>male</td>
					<td>Engineer</td>
					<td>12/9/2010 2:55:33 PM</td>
					<td>Tony Zhou</td>
				</tr>
				<tr>
					<td>Software</td>
					<td>test3</td>
					<td>test3</td>
					<td>male</td>
					<td>Engineer</td>
					<td>12/9/2010 2:56:07 PM</td>
					<td>Tony Zhou</td>
				</tr>
				<tr>
					<td>Software</td>
					<td>test4</td>
					<td>test4</td>
					<td>female</td>
					<td>Assistant Engineer</td>
					<td>12/9/2010 2:56:10 PM</td>
					<td>Tony Zhou</td>
				</tr>
				<tr>
					<td>Software</td>
					<td>test5</td>
					<td>test5</td>
					<td>female</td>
					<td>Assistant Engineer</td>
					<td>12/9/2010 2:56:11 PM</td>
					<td>Tony Zhou</td>
				</tr>
				<tr>
					<td>Software</td>
					<td>test6</td>
					<td>test6</td>
					<td>male</td>
					<td>Assistant Engineer</td>
					<td>12/9/2010 2:56:13 PM</td>
					<td>Tony Zhou</td>
				</tr>
				<tr>
					<td>Marketing</td>
					<td>test7</td>
					<td>test7</td>
					<td>male</td>
					<td>normal</td>
					<td>12/9/2010 2:56:52 PM</td>
					<td>Tony Zhou</td>
				</tr>
				<tr>
					<td>Marketing</td>
					<td>test8</td>
					<td>test8</td>
					<td>female</td>
					<td>normal</td>
					<td>12/9/2010 2:56:57 PM</td>
					<td>Tony Zhou</td>
				</tr>
				<tr>
					<td>Marketing</td>
					<td>test9</td>
					<td>test9</td>
					<td>female</td>
					<td>normal</td>
					<td>12/9/2010 2:56:59 PM</td>
					<td>Tony Zhou</td>
				</tr>
			</tbody>
		</table>
	</div> -->


	<!-- <h2>Group by column 0</h2>
	<h3> $("#Table1").groupTable({ groupby: '0' });</h3>
	<div id="t1">
		<table cellspacing="0" rules="all" border="1" id="Table1" style="width:100%;border-collapse:collapse;">
			<thead>
				<tr>
					<th scope="col">Departmement</th>
					<th scope="col">User Id</th>
					<th scope="col">Name</th>
					<th scope="col">Gender</th>
					<th scope="col">Title</th>
					<th scope="col">Modified</th>
					<th scope="col">Modified By</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>Software</td>
					<td>test1</td>
					<td>test1</td>
					<td>male</td>
					<td>Engineer</td>
					<td>12/2/2010 10:41:58 AM</td>
					<td>&nbsp;</td>
				</tr>
				<tr>
					<td>Software</td>
					<td>test2</td>
					<td>test2</td>
					<td>male</td>
					<td>Engineer</td>
					<td>12/9/2010 2:55:33 PM</td>
					<td>Tony Zhou</td>
				</tr>
				<tr>
					<td>Software</td>
					<td>test3</td>
					<td>test3</td>
					<td>male</td>
					<td>Engineer</td>
					<td>12/9/2010 2:56:07 PM</td>
					<td>Tony Zhou</td>
				</tr>
				<tr>
					<td>Software</td>
					<td>test4</td>
					<td>test4</td>
					<td>female</td>
					<td>Assistant Engineer</td>
					<td>12/9/2010 2:56:10 PM</td>
					<td>Tony Zhou</td>
				</tr>
				<tr>
					<td>Software</td>
					<td>test5</td>
					<td>test5</td>
					<td>female</td>
					<td>Assistant Engineer</td>
					<td>12/9/2010 2:56:11 PM</td>
					<td>Tony Zhou</td>
				</tr>
				<tr>
					<td>Software</td>
					<td>test6</td>
					<td>test6</td>
					<td>male</td>
					<td>Assistant Engineer</td>
					<td>12/9/2010 2:56:13 PM</td>
					<td>Tony Zhou</td>
				</tr>
				<tr>
					<td>Marketing</td>
					<td>test7</td>
					<td>test7</td>
					<td>male</td>
					<td>normal</td>
					<td>12/9/2010 2:56:52 PM</td>
					<td>Tony Zhou</td>
				</tr>
				<tr>
					<td>Marketing</td>
					<td>test8</td>
					<td>test8</td>
					<td>female</td>
					<td>normal</td>
					<td>12/9/2010 2:56:57 PM</td>
					<td>Tony Zhou</td>
				</tr>
				<tr>
					<td>Marketing</td>
					<td>test9</td>
					<td>test9</td>
					<td>female</td>
					<td>normal</td>
					<td>12/9/2010 2:56:59 PM</td>
					<td>Tony Zhou</td>
				</tr>
			</tbody>
		</table>
	</div> -->

	<h2>Group by column 0,3</h2>
	<h3>$("#Table2").groupTable({ groupby: '0,3' });</h3>
	<div id="t1">
		<table cellspacing="0" rules="all" border="1" id="Table2" style="width:100%;border-collapse:collapse;">
			<thead>
				<tr>
					<th scope="col">Departmement</th>
					<th scope="col">User Id</th>
					<th scope="col">Name</th>
					<th scope="col">Gender</th>
					<th scope="col">Title</th>
					<th scope="col">Modified</th>
					<th scope="col">Modified By</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>Software</td>
					<td>test1</td>
					<td>test1</td>
					<td>male</td>
					<td>Engineer</td>
					<td>12/2/2010 10:41:58 AM</td>
					<td>&nbsp;</td>
				</tr>
				<tr>
					<td>Software</td>
					<td>test2</td>
					<td>test2</td>
					<td>male</td>
					<td>Engineer</td>
					<td>12/9/2010 2:55:33 PM</td>
					<td>Tony Zhou</td>
				</tr>
				<tr>
					<td>Software</td>
					<td>test3</td>
					<td>test3</td>
					<td>male</td>
					<td>Engineer</td>
					<td>12/9/2010 2:56:07 PM</td>
					<td>Tony Zhou</td>
				</tr>
				<tr>
					<td>Software</td>
					<td>test4</td>
					<td>test4</td>
					<td>female</td>
					<td>Assistant Engineer</td>
					<td>12/9/2010 2:56:10 PM</td>
					<td>Tony Zhou</td>
				</tr>
				<tr>
					<td>Software</td>
					<td>test5</td>
					<td>test5</td>
					<td>female</td>
					<td>Assistant Engineer</td>
					<td>12/9/2010 2:56:11 PM</td>
					<td>Tony Zhou</td>
				</tr>
				<tr>
					<td>Software</td>
					<td>test6</td>
					<td>test6</td>
					<td>male</td>
					<td>Assistant Engineer</td>
					<td>12/9/2010 2:56:13 PM</td>
					<td>Tony Zhou</td>
				</tr>
				<tr>
					<td>Marketing</td>
					<td>test7</td>
					<td>test7</td>
					<td>male</td>
					<td>normal</td>
					<td>12/9/2010 2:56:52 PM</td>
					<td>Tony Zhou</td>
				</tr>
				<tr>
					<td>Marketing</td>
					<td>test8</td>
					<td>test8</td>
					<td>female</td>
					<td>normal</td>
					<td>12/9/2010 2:56:57 PM</td>
					<td>Tony Zhou</td>
				</tr>
				<tr>
					<td>Marketing</td>
					<td>test9</td>
					<td>test9</td>
					<td>female</td>
					<td>normal</td>
					<td>12/9/2010 2:56:59 PM</td>
					<td>Tony Zhou</td>
				</tr>
			</tbody>
		</table>
	</div>

	<!-- <h2>Group by column 0,4,3. and default collapse</h2>
	<h3>$("#Table3").groupTable({ groupby: '0,4,3',collapse:1 });</h3>
	<div id="t1">
		<table cellspacing="0" rules="all" border="1" id="Table3" style="width:100%;border-collapse:collapse;">
			<thead>
				<tr>
					<th scope="col">Departmement</th>
					<th scope="col">User Id</th>
					<th scope="col">Name</th>
					<th scope="col">Gender</th>
					<th scope="col">Title</th>
					<th scope="col">Modified</th>
					<th scope="col">Modified By</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>Software</td>
					<td>test1</td>
					<td>test1</td>
					<td>male</td>
					<td>Engineer</td>
					<td>12/2/2010 10:41:58 AM</td>
					<td>&nbsp;</td>
				</tr>
				<tr>
					<td>Software</td>
					<td>test2</td>
					<td>test2</td>
					<td>male</td>
					<td>Engineer</td>
					<td>12/9/2010 2:55:33 PM</td>
					<td>Tony Zhou</td>
				</tr>
				<tr>
					<td>Software</td>
					<td>test3</td>
					<td>test3</td>
					<td>male</td>
					<td>Engineer</td>
					<td>12/9/2010 2:56:07 PM</td>
					<td>Tony Zhou</td>
				</tr>
				<tr>
					<td>Software</td>
					<td>test4</td>
					<td>test4</td>
					<td>female</td>
					<td>Assistant Engineer</td>
					<td>12/9/2010 2:56:10 PM</td>
					<td>Tony Zhou</td>
				</tr>
				<tr>
					<td>Software</td>
					<td>test5</td>
					<td>test5</td>
					<td>female</td>
					<td>Assistant Engineer</td>
					<td>12/9/2010 2:56:11 PM</td>
					<td>Tony Zhou</td>
				</tr>
				<tr>

					<td>Software</td>
					<td>test1</td>
					<td>test1</td>
					<td>male</td>
					<td>Engineer</td>
					<td>12/2/2010 10:41:58 AM</td>
					<td>&nbsp;</td>
				</tr>
				<tr>
					<td>Software</td>
					<td>test2</td>
					<td>test2</td>
					<td>male</td>
					<td>Engineer</td>
					<td>12/9/2010 2:55:33 PM</td>
					<td>Tony Zhou</td>
				</tr>
				<tr>
					<td>Software</td>
					<td>test3</td>
					<td>test3</td>
					<td>male</td>
					<td>Engineer</td>
					<td>12/9/2010 2:56:07 PM</td>
					<td>Tony Zhou</td>
				</tr>
				<tr>
					<td>Software</td>
					<td>test4</td>
					<td>test4</td>
					<td>female</td>
					<td>Assistant Engineer</td>
					<td>12/9/2010 2:56:10 PM</td>
					<td>Tony Zhou</td>
				</tr>
				<tr>
					<td>Software</td>
					<td>test5</td>
					<td>test5</td>
					<td>female</td>
					<td>Assistant Engineer</td>
					<td>12/9/2010 2:56:11 PM</td>
					<td>Tony Zhou</td>
				</tr>
				<tr>
					<td>Software</td>
					<td>test1</td>
					<td>test1</td>
					<td>male</td>
					<td>Engineer</td>
					<td>12/2/2010 10:41:58 AM</td>
					<td>&nbsp;</td>
				</tr>
				<tr>
					<td>Software</td>
					<td>test2</td>
					<td>test2</td>
					<td>male</td>
					<td>Engineer</td>
					<td>12/9/2010 2:55:33 PM</td>
					<td>Tony Zhou</td>
				</tr>
				<tr>
					<td>Software</td>
					<td>test3</td>
					<td>test3</td>
					<td>male</td>
					<td>Engineer</td>
					<td>12/9/2010 2:56:07 PM</td>
					<td>Tony Zhou</td>
				</tr>
				<tr>
					<td>Software</td>
					<td>test4</td>
					<td>test4</td>
					<td>female</td>
					<td>Assistant Engineer</td>
					<td>12/9/2010 2:56:10 PM</td>
					<td>Tony Zhou</td>
				</tr>
				<tr>
					<td>Software</td>
					<td>test5</td>
					<td>test5</td>
					<td>female</td>
					<td>Assistant Engineer</td>
					<td>12/9/2010 2:56:11 PM</td>
					<td>Tony Zhou</td>
				</tr>
				<tr>
					<td>Software</td>
					<td>test6</td>
					<td>test6</td>
					<td>male</td>
					<td>Assistant Engineer</td>
					<td>12/9/2010 2:56:13 PM</td>
					<td>Tony Zhou</td>
				</tr>
				<tr>
					<td>Marketing</td>
					<td>test7</td>
					<td>test7</td>
					<td>male</td>
					<td>normal</td>
					<td>12/9/2010 2:56:52 PM</td>
					<td>Tony Zhou</td>
				</tr>
				<tr>
					<td>Marketing</td>
					<td>test8</td>
					<td>test8</td>
					<td>female</td>
					<td>normal</td>
					<td>12/9/2010 2:56:57 PM</td>
					<td>Tony Zhou</td>
				</tr>
				<tr>
					<td>Marketing</td>
					<td>test9</td>
					<td>test9</td>
					<td>female</td>
					<td>normal</td>
					<td>12/9/2010 2:56:59 PM</td>
					<td>Tony Zhou</td>
				</tr>
			</tbody>
		</table>
	</div> -->

</body>